<!-- 蓝色简洁登录页面 -->
<template>
  <div class="t-login" style="text-align: center">
    <!-- 页面装饰图片 -->
    <img class="img-a" src="@/assets/login/2.png">
    <img class="img-b" src="@/assets/login/3.png">
    <!-- 标题 -->
    <div class="t-b">{{ title }}</div>
    <form class="cl">
      <div class="t-a">
        <img src="@/assets/login/zh.png">
        <input type="text" placeholder="请输入手机号码" maxlength="11" v-model="user.phone"/>
      </div>
      <div class="t-a">
        <img src="@/assets/login/pwd.png">
        <input type="password" placeholder="请输入您的密码" v-model="user.password"/>
      </div>
      <van-button class="button" :loading="loading" @click="login">登 录</van-button>
    </form>
  </div>
</template>
<script>
import api from '@/api/system.js'
import {Dialog, Toast} from "vant";
import {config} from '@/common/WebIMConfig'
import WebIm from "@/common/initWeb";


export default {
  data() {
    return {
      title: '享学了么',
      user: {
        phone: '', //学号/工号
        password: '', //密码
        nickName: ''
      },
      loading: false
    };
  },
  created() {
  },
  methods: {
    //当前登录按钮操作
    async login() {

      let that = this;
      if (!that.user.phone) {
        Dialog.alert({title: "提示", message: "请输入手机号码"});
        return;
      }
      if (!that.user.password) {
        Dialog.alert({title: "提示", message: "请输入密码"});
        return;
      }
      that.loading = true;
      try {
        const data = await api.login(that.user)
        that.loading = false;
        if (data) {
          localStorage.setItem("token", data.token)
          localStorage.setItem("userId", data.id)
          localStorage.setItem("headImgUrl", data.headImgUrl)
          localStorage.setItem("nickName", data.nickName)
          localStorage.setItem("phone", data.phone)
          localStorage.setItem("password", that.user.password)
          this.user.nickname = data.nickName
          Dialog.alert({message: "登录成功"});

          that.hxLogin();
        }
      } catch (error) {
        that.loading = false;
      }
    },
    hxLogin() {
      const _this = this;

      let options = {
        user: _this.user.phone,
        pwd: _this.user.password,
        appKey: config.appkey,
        success: function (res) {
          console.log("----------------")
          console.log("登录成功："+ res.access_token)
          localStorage.setItem("imToken", res.access_token)
          // _this.$router.push('/chat')
        },
        error: function(){
          console.log("sssssssssss")
        }
      };
      _this.$router.push('/chat')
    }
  }
};
</script>
<style>
.img-a {
  position: absolute;
  width: 100%;
  top: -140px;
  right: -25px;
}

.img-b {
  position: absolute;
  width: 50%;
  bottom: 0;
  left: -25px;
}

.t-login {
  width: 300px;
  margin: 0 auto;
  font-size: 14px;
  color: #000;
}

.t-login .button {
  width: 200px;
  font-size: 14px;
  background: #5677fc;
  color: #fff;
  height: 45px;
  line-height: 45px;
  border-radius: 25px;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
  padding: 0 10px 0 60px;
  height: 45px;
  line-height: 45px;
  margin-bottom: 45px;
  background: #f8f7fc;
  border: 1px solid #e9e9e9;
  font-size: 14px;
  border-radius: 25px;
}

.t-login .t-a {
  position: relative;
}

.t-login .t-a img {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 46px;
  top: 14px;
  border-right: 1px solid #dedede;
  padding-right: 10px;
}

.t-login .t-b {
  text-align: left;
  font-size: 23px;
  color: #000;
  padding: 150px 0 60px 0;
  font-weight: bold;
}

.t-login .t-c {
  position: absolute;
  right: 11px;
  top: 11px;
  background: #5677fc;
  color: #fff;
  font-size: 22px;
  border-radius: 25px;
  height: 25px;
  line-height: 25px;
  padding: 0 12px;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 40px 0;
}

.t-login .t-e {
  text-align: center;
  width: 125px;
  margin: 40px auto 0;
}

.t-login .t-g {
  float: left;
  width: 50%;
}

.t-login .t-e img {
  width: 25px;
  height: 25px;
}

.t-login .t-f {
  text-align: center;
  margin: 100px 0 0 0;
  color: #666;
  z-index: 9999;
}

.t-login .t-f text {
  margin-left: 10px;
  color: #aaaaaa;
  font-size: 14px;
}

.t-login .uni-input-placeholder {
  color: #000;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}
</style>
